<template>
  <div class="nav-swiper">
    <div class="nav-swiper-main">
      <div class="swiper-t">
        <ul @mouseleave="mouseOut">
          <li
            v-for="item in firstList"
            :key="item.id"
            @mouseenter="mouseHover(item.id)"
            :class="item.id == currentId ? 'active' : ''"
          >
            <span>{{ item.categoryName }}</span>
            <el-icon><ArrowRight /></el-icon>
          </li>
          <div class="active-r" v-if="isShow">
            <div class="active-r-t">
              <h3 class="active-title">基础知识</h3>
              <div>
                <div>知识点:</div>
                <ul>
                  <li>Vue.js</li>
                  <li>TypeScript</li>
                  <li>React.js</li>
                  <li>HTML/CSS</li>
                </ul>
              </div>
            </div>
            <div class="active-r-b">
              <ul>
                <li>
                  <img src="@/assets/image/course.png" alt="aa" />
                  <div>
                    <div class="active-course-title">
                      晋级TypeScript高手，成为抢手的前端开发人才
                    </div>
                    <div class="active-course-type">中级 · 87人报名</div>
                    <div class="active-course-price">免费学习</div>
                  </div>
                </li>
                <li>
                  <img src="@/assets/image/course.png" alt="aa" />
                  <div>
                    <div class="active-course-title">
                      晋级TypeScript高手，成为抢手的前端开发人才
                    </div>
                    <div class="active-course-type">中级 · 87人报名</div>
                    <div class="active-course-price">免费学习</div>
                  </div>
                </li>
                <li>
                  <img src="@/assets/image/course.png" alt="aa" />
                  <div>
                    <div class="active-course-title">
                      晋级TypeScript高手，成为抢手的前端开发人才
                    </div>
                    <div class="active-course-type">中级 · 87人报名</div>
                    <div class="active-course-price">免费学习</div>
                  </div>
                </li>
                <li>
                  <img src="@/assets/image/course.png" alt="aa" />
                  <div>
                    <div class="active-course-title">
                      晋级TypeScript高手，成为抢手的前端开发人才
                    </div>
                    <div class="active-course-type">中级 · 87人报名</div>
                    <div class="active-course-price">免费学习</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </ul>
        <div>
          <el-carousel :interval="3000" arrow="always" v-if="sliderList.length > 0">
            <el-carousel-item v-for="item in sliderList" :key="item.id">
              <img :src="item.imageUrl" :alt="item.imageName" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <ul class="swiper-b">
        <li>
          <h3>
            <img src="@/assets/image/chuji.png" alt="chuji" />
          </h3>
          <div>
            <h4>初级课程</h4>
            <span>入门快，岗位多</span>
          </div>
        </li>
        <li>
          <h3>
            <img src="@/assets/image/chuji.png" alt="chuji" />
          </h3>
          <div>
            <h4>初级课程</h4>
            <span>入门快，岗位多</span>
          </div>
        </li>
        <li>
          <h3>
            <img src="@/assets/image/chuji.png" alt="chuji" />
          </h3>
          <div>
            <h4>初级课程</h4>
            <span>入门快，岗位多</span>
          </div>
        </li>
        <li>
          <h3>
            <img src="@/assets/image/chuji.png" alt="chuji" />
          </h3>
          <div>
            <h4>初级课程</h4>
            <span>入门快，岗位多</span>
          </div>
        </li>
        <li>
          <h3>
            <img src="@/assets/image/chuji.png" alt="chuji" />
          </h3>
          <div>
            <h4>初级课程</h4>
            <span>入门快，岗位多</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ArrowRight } from "@element-plus/icons-vue";
import { getSliders } from "@/api/slider";
import { getFirstCategorys, getSceondCategorys } from "@/api/course";
import { onBeforeMount, reactive, ref } from "vue";

let sliderList = ref([]);
let firstList = ref([]);
let isShow = ref(false);
let currentId = ref(0);
onBeforeMount(() => {
  //轮播图数据
  getSliders().then((res) => {
    sliderList.value = res.data.list;
  });
  //一级分类数据
  getFirstCategorys().then((res) => {
    firstList.value = res.data.list;
  });
});
const mouseHover = (id) => {
  isShow.value = true;
  currentId.value = id;
  getSceondCategorys({ categoryId: id }).then((res) => {
    console.log(res);
  });
};
const mouseOut = () => {
  isShow.value = false;
  currentId.value = 0;
};
</script>

<style scoped>
.nav-swiper-main {
  width: 1000px;
  padding: 47px 0;
  margin: 0 auto;
}
.swiper-t {
  display: flex;
  justify-content: space-between;
  height: 373px;
  border-radius: 11px 11px 0px 0px;
}
.swiper-t > ul {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 160px;
  height: 100%;
  background: #2b283d;
  border-radius: 11px 0px 0px 0px;
}
.swiper-t > ul > li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 120px;
  height: 37px;
  padding: 0 20px;
  font-size: 16px;
  color: #f2f2f2;
  cursor: pointer;
}
.active {
  background: linear-gradient(
    90deg,
    #3fe5ff 0%,
    rgba(62, 222, 255, 0.93) 2%,
    rgba(60, 203, 255, 0.73) 9%,
    rgba(58, 186, 255, 0.56) 17%,
    rgba(57, 172, 255, 0.41) 25%,
    rgba(55, 160, 255, 0.28) 33%,
    rgba(54, 150, 255, 0.18) 43%,
    rgba(53, 142, 255, 0.1) 53%,
    rgba(53, 137, 255, 0.04) 64%,
    rgba(53, 133, 255, 0.01) 77%,
    rgba(53, 133, 255, 0) 100%
  );
}
.active-r {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 160px;
  z-index: 99;
  width: 724px;
  height: 373px;
  background: #fff;
  border-radius: 0px 11px 0px 0px;
}
.active-r-t {
  padding: 23px 30px;
}
.active-r-t > div {
  display: flex;
  margin-top: 11px;
}
.active-r-t > div ul {
  display: flex;
  flex-wrap: wrap;
  margin-left: 7px;
}
.active-r-t > div ul li + li {
  margin-left: 20px;
}
.active-r-b {
  width: 724px;
  height: 217px;
  background: #f3f5f6;
}
.active-r-b > ul {
  display: flex;
  height: 100%;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 30px;
}
.active-r-b > ul li {
  display: flex;
  width: 50%;
}
.active-r-b > ul li img {
  width: 140px;
  height: 81px;
}
.active-r-b > ul li > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 4px;
}
.active-course-title {
  font-size: 14px;
  color: #333;
}
.active-course-type {
  font-size: 12px;
  color: #808080;
}
.active-course-price {
  font-size: 12px;
  color: #3586ff;
}
.swiper-t > div {
  width: 840px;
  height: 373px;
}
.el-carousel,
.el-carousel__item {
  height: 373px;
}
.el-carousel img {
  width: 100%;
  height: 373px;
}
.swiper-b {
  display: flex;
}
.swiper-b li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 213px;
  height: 133px;
  background: #fff;
  border-radius: 0px 0px 0px 11px;
  cursor: pointer;
}
.swiper-b li img {
  width: 64px;
  height: 64px;
}
.swiper-b li div {
  margin-left: 11px;
}
.swiper-b li div h4 {
  font-size: 16px;
  color: #333;
}
.swiper-b li div span {
  font-size: 12px;
  color: #808080;
}
</style>
